<template>
	<view class="companyIndex">
		<view class="companyIndex1">
			<view class="accountBalance">
				账号余额：
				<view class="accountBalanceFont">{{ item.publicCollect }}￥</view>
			</view>
			<view class="cashBalance">
				现金余额：
				<view class="cashBalance">{{ item.cashCollect }}￥</view>
			</view>
			<view class="payCost">
				积累应付：
				<view class="payCost">{{ item.payCost }}￥</view>
			</view>
			<view class="collect">
				积累应收：
				<view class="collect">{{ item.collect }}￥</view>
			</view>
			<view class="account">
				公司余额：
				<view class="accountCost" style="color: #f92020; font-weight: 700">{{ item.balance }}￥</view>
			</view>
			<view class="account">
				资产：
				<view class="accountCost" style="color: #e19c47; font-weight: 700">{{ item.account }}￥</view>
			</view>
			<view class="residueTax">
				剩余税额：
				<view class="residueTax">{{ item.tax }}￥</view>
			</view>
			<button class="costInput" @click="toAssetInject">资金注入</button>
			<button class="costLoan" @click="toCostLoan">资金借贷</button>
		</view>
	</view>
</template>

<script>
import { request } from '../../request';
export default {
	data() {
		return {
			item: {
				publicCollect: null,
				cashCollect: null,
				payCost: null,
				collect: null,
				account: null,
				tax: null,
				balance: null
			}
		};
	},
	methods: {
		toAssetInject() {
			uni.navigateTo({
				url: '/pages/company/assetInject'
			});
		},
		// 到资金借贷页面
		toCostLoan() {
			uni.navigateTo({
				url: '/pages/company/costLoan'
			});
		}
	},
	onShow() {
		request('public/getCompanyCost', {}, 'GET').then((res) => {
			if (res.data.code != 200) {
				this.$message.error('   ' + res.data.msg);
				return;
			}
			this.item = res.data.data;
		});
	}
};
</script>

<style scoped>
/* 基础容器样式 */
.companyIndex {
	font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
	padding: 16px;
	background-color: #f5f7fa;
}

/* 网格布局 */
.companyIndex1 {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

/* 卡片样式 */
.companyIndex1 > view {
	padding: 16px;
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* 标签文字样式 - 更深的灰色提升可读性 */
.companyIndex1 > view > view:first-child {
	font-size: 14px;
	color: #555; /* 从#666加深为#555 */
	font-weight: 400;
}

/* 数值显示样式 - 调整颜色权重 */
.companyIndex1 > view > view:last-child {
	font-size: 15px;
	font-weight: 500;
}

/* 特殊卡片样式 */
.account {
	/* background: linear-gradient(135deg, #f6f9ff 0%, #e8f0ff 100%); */
	/* border: 1px solid #e1e8ff; */
}

/* 按钮容器 - 并排显示 */
.button-group {
	display: flex; /* 改为flex布局 */
	gap: 12px;
	margin-top: 16px;
}

/* 按钮基础样式 - 保持等高 */
.costInput,
.costLoan {
	flex: 1; /* 等分宽度 */
	height: 44px;
	border: none;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s;
}

/* 主按钮样式 */
.costInput {
	background-color: #3478f6;
	color: white;
}

/* 次按钮样式 */
.costLoan {
	background-color: #f8f8f8;
	color: #3478f6;
	border: 1px solid #e5e5e5;
}

/* 按钮交互状态 */
.costInput:active {
	background-color: #2a65d1;
	transform: scale(0.98);
}

.costLoan:active {
	background-color: #f0f0f0;
	transform: scale(0.98);
}

/* ========== 文字颜色优化 ========== */
.accountBalance > view:last-child {
	color: #333; /* 账号余额用深黑色 */
}

.cashBalance > view:last-child {
	color: #ff7d00; /* 现金余额用橙色 */
}

.payCost > view:last-child {
	color: #f56c6c; /* 应付用警示红 */
}

.collect > view:last-child {
	color: #07c160; /* 应收用成功绿 */
}

.account > view:last-child {
	color: #3478f6; /* 总余额用主品牌蓝 */
	font-weight: 600;
}

.residueTax > view:last-child {
	color: #722ed1; /* 税额用紫色 */
}

/* 标签文字统一加深 */
.accountBalance > view:first-child,
.cashBalance > view:first-child,
.payCost > view:first-child,
.collect > view:first-child,
.account > view:first-child,
.residueTax > view:first-child {
	color: #444; /* 标签文字加深 */
	font-weight: 500; /* 中等字重 */
}

.accountCost {
	color: #d53819;
}
/* 响应式调整 */
@media (min-width: 375px) {
	.companyIndex1 > view {
		padding: 18px 16px;
	}
}
</style>
